<%@page import="ta.utils.PageInfo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="ta.pojo.User"%>
<%@page import="ta.dao.UserDao"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<base href="${basepath}">
<title>后台首页</title>

<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<!-- ace styles -->
<link rel="stylesheet" href="assets/css/ace.min.css"
	class="ace-main-stylesheet" id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script src="assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
</head>

<body class="no-skin">
	
	<jsp:include page="/templetes/header.jsp"></jsp:include>
	<div class="main-container ace-save-state" id="main-container">
		<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>
	<jsp:include page="/templetes/menu.jsp"></jsp:include>
		
		<div class="main-content">
			<div class="main-content-inner">
				<div class="breadcrumbs ace-save-state" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="ace-icon fa fa-home home-icon"></i> <a href="admin/admin.jsp">Home</a>
						</li>
						<li class="active">用户管理</li>
					</ul>
					<!-- /.breadcrumb -->

					<div class="nav-search" id="nav-search">
						<form id="searchForm" method="post" action="admin/UserServlet?type=getlist&page=1" class="form-search">
							<span class="input-icon">
							 <input type="text" name="keyword" placeholder="Search ..." class="nav-search-input"	id="nav-search-input" autocomplete="off" /> 
								<i id="btnSearch" 	class="ace-icon fa fa-search nav-search-icon"></i>
							</span>
						</form>
					</div>
					<!-- /.nav-search -->
				</div>

				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<p>

								<button class="btn btn-sm btn-success" data-toggle="modal"
									data-target="#addUserForm">
									<i class="glyphicon glyphicon-plus bigger-110"></i> <span
										class="bigger-110 no-text-shadow">添加用户</span>
								</button>
								<button class="btn btn-sm btn-danger" id="btnBatchDelete">
									<i class="glyphicon glyphicon-remove bigger-110"></i> <span
										class="bigger-110 no-text-shadow">批量删除</span>
								</button>

							</p>

							<table class="table  table-bordered table-hover">
								<thead>
									<tr>
										<th class="center"><label class="pos-rel">
										 <input id="checkAll" type="checkbox" class="ace" />
										  <span class="lbl"></span>
										</label></th>
										<th class="center">编号</th>
										<th class="center">账号</th>
										<th class="center">密码</th>
										<th class="center">操作</th>
									</tr>
								</thead>

								<tbody>
								
								<c:forEach var="user" items="${pb.data }">
								   	<tr class="center">
										<td class="center"><label class="pos-rel">
										 <input	name="chk" value="${user.userid }" type="checkbox" class="ace" /> <span class="lbl"></span>
										</label></td>
										<td>${user.userid }</td>
										<td>${user.username }</td>
										<td>${user.userpwd }</td>
										<td>
											<div class="btn-group">
												<button name="btnEdit" value="${user.userid }" class="btn btn-xs btn-info">
													<i class="ace-icon fa fa-pencil bigger-120"></i>
												</button>
												<button name="btnDelete" value="${user.userid }" class="btn btn-xs btn-danger">
													<i class="ace-icon fa fa-trash-o bigger-120"></i>
												</button>
											</div>
										
										</td>
									</tr>
								</c:forEach>							

								</tbody>
							<tfoot>
							    <tr >
							    <td class="center" colspan="8">
							       <ul class="pagination">
									<li ><a href="admin/UserServlet?type=getlist&page=1&keywords=${keywords }">首页</a></li>
									<li ><a href="admin/UserServlet?type=getlist&page=${pb.currentpage-1<1?1:pb.currentpage-1 }&keywords=${keywords }">上一页</a></li>
                                    <c:forEach var="i" begin="${pb.currentpage-2<1?1:pb.currentpage-2 }" end="${pb.currentpage+2>=pb.totalpage?pb.totalpage:pb.currentpage+2 }">
                                    <li id="li${i }"><a href="admin/UserServlet?type=getlist&page=${i }&keywords=${keywords }">${i }</a></li>
                                    </c:forEach>                                                                    
                                     <li ><a href="admin/UserServlet?type=getlist&page=${pb.currentpage+1 >=pb.totalpage?pb.totalpage:pb.currentpage+1}&keywords=${keywords }">下一页</a></li>
                                     <li><a href="admin/UserServlet?type=getlist&page=${pb.totalpage }&keywords=${keywords }">末页</a></li>
											</ul>
								</td>
							    </tr>
							    </tfoot>
							</table>
							<!-- PAGE CONTENT ENDS -->
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<div class="footer">
			<div class="footer-inner">
				<div class="footer-content">
					<span class="bigger-120"> <span class="blue bolder">Ace</span>
						Application &copy; 2013-2014
					</span> &nbsp; &nbsp; <span class="action-buttons"> <a href="#">
							<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
					</a> <a href="#"> <i
							class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
					</a> <a href="#"> <i
							class="ace-icon fa fa-rss-square orange bigger-150"></i>
					</a>
					</span>
				</div>
			</div>
		</div>

		<a href="#" id="btn-scroll-up"
			class="btn-scroll-up btn btn-sm btn-inverse"> <i
			class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

		<!-- 添加用户模态框（Modal） -->
		<div class="modal fade" id="addUserForm" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px; height: 300px">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">添加用户</h4>
					</div>
					<div class="modal-body">
						<form id="f" action="admin/UserServlet?type=add" method="post">
							<fieldset>
								<label class="block clearfix"> <span
									class="block input-icon input-icon-right"> <input
										type="text" class="form-control" name="username"
									id="username"	placeholder="账号" /> <i class="ace-icon fa fa-user"></i>
								</span>
								</label>
								<label class="block clearfix"> <span
									class="block input-icon input-icon-right"> <input
										type="password" class="form-control" name="userpwd" id="userpwd"
										placeholder="密码" /> <i class="ace-icon fa fa-lock"></i>
								</span>
								</label>
								<label class="block clearfix"> <span
									class="block input-icon input-icon-right"> <input
									id="repwd"	type="password" class="form-control" placeholder="确认密码" /> <i
										class="ace-icon fa fa-retweet"></i>
								</span>
								</label>
							</fieldset>
						</form>
					</div>
					<div class="modal-footer">
						<button id="btnAddUser" type="button" class="btn btn-success">确定</button>
						<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script src="assets/js/jquery-2.1.4.min.js"></script>

	<!-- <![endif]-->

	<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
	<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
	<script src="assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->

	<!-- ace scripts -->
	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>
	<script src="assets/laydate/laydate.js"></script>
	<script type="text/javascript">
            $(function(){
            	//日期组件
            	laydate.render({
            		elem: '#birthday'
            		//,type: 'datetime'
            		,theme: 'molv'
            	});
            	
            	$("#li${pb.currentpage}").addClass("active");
            	//搜索            	
            	$("#btnSearch").click(function(){
            		$("#searchForm").submit();            		
            	});
            	//全选反选
            	$("#checkAll").click(function(){
            		$("input[name='chk']").prop("checked",this.checked);
            	});
            	//没有全部选中，把checkAll选中去掉
            	$("input[name='chk']").click(function(){
            		var $subs=$("input[name='chk']");   //所有name为chk的input控件         	
            		//var $sub=$("input[name='chk']:checked"); //所有name为chk的被选中的input控件             		
            		$("#checkAll").prop("checked",$subs.length==$subs.filter(":checked").length)            	
            	});
            	//删除
            	$("button[name='btnDelete']").click(function(){
            		var userid=this.value;
            		if(confirm("你确定要删除该行数据吗？"))
            		{            			
                		location="admin/UserServlet?type=del&userid="+userid;
            		}
            	});
            	
            	//批量删除
            	$("#btnBatchDelete").click(function(){
            		if($("input[name='chk']:checked").length<1 )
            		{
            			alert("没有选中数据行，无法批量删除！");
            		}
            		else{
            			var str="";            			
            			$("input[name='chk']:checked").each(function () {
      		   		      str+=$(this).val()+",";		
      		            });
            			str=str.substring(0,str.length-1);
            			if(confirm("你确定要删除选中行的数据吗？"))
            			{
            				location="admin/UserServlet?type=del&userid="+str;
            			}
            		}
            	});
            	
            	//编辑
            	$("button[name='btnEdit']").click(function(){
            		var userid=this.value;            		      			
                	location="admin/UserServlet?type=getbyid&userid="+userid;
            		
            	});
            	//添加
            	$("#btnAddUser").click(function(){
            		var form=$("#f");
            		var username=$("#username").val();
            		var userpwd=$("#userpwd").val();
            		var repwd=$("#repwd").val();
            		if(username.length<1)
            		{
            			alert("账号不能为空！");
            			$("#username").focus();
            			return;
            		}
            		else if(userpwd.length<1)
            		{
            			alert("密码不能为空！");
            			$("#userpwd").focus();
            			return;
            		}
            		else if(userpwd!=repwd)
            		{
            			alert("两次输入的密码不一致！");
            			$("#userpwd").focus();
            			return;
            		}
            		form.submit();
            	});
            });
        </script>	
</body>
</html>
